<template>
  <div class="menu-management">
    <ACard :bordered="false">
      <!-- 操作按钮 -->
      <div class="table-actions">
        <AButton type="primary" @click="handleAdd">
          <PlusOutlined />
          新增菜单
        </AButton>
      </div>

      <!-- 表格 -->
      <ATable
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        :loading="loading"
        row-key="id"
        :default-expand-all-rows="true"
        :scroll="{ x: 800 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'icon'">
            <component :is="record.icon" v-if="record.icon" />
          </template>
          <template v-else-if="column.key === 'type'">
            <ATag :color="record.type === 1 ? 'blue' : record.type === 2 ? 'green' : 'orange'">
              {{ record.type === 1 ? '目录' : record.type === 2 ? '菜单' : '按钮' }}
            </ATag>
          </template>
          <template v-else-if="column.key === 'status'">
            <ATag :color="record.status === 1 ? 'success' : 'default'">
              {{ record.status === 1 ? '启用' : '禁用' }}
            </ATag>
          </template>
          <template v-else-if="column.key === 'action'">
            <ASpace>
              <AButton type="link" size="small" @click="handleEdit(record)">
                编辑
              </AButton>
              <AButton type="link" size="small" @click="handleAddChild(record)">
                添加子菜单
              </AButton>
              <AButton type="link" size="small" danger @click="handleDelete(record)">
                删除
              </AButton>
            </ASpace>
          </template>
        </template>
      </ATable>
    </ACard>
  </div>
</template>

<script>
export default {
  name: 'SystemMenu'
}
</script>

<script setup>
import { ref } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { PlusOutlined, HomeOutlined, SettingOutlined, UserOutlined, TeamOutlined, MenuOutlined } from '@ant-design/icons-vue'

const loading = ref(false)

const columns = [
  { title: '菜单名称', dataIndex: 'title', key: 'title', width: 200 },
  { title: '图标', dataIndex: 'icon', key: 'icon', width: 80 },
  { title: '类型', dataIndex: 'type', key: 'type', width: 100 },
  { title: '路径', dataIndex: 'path', key: 'path' },
  { title: '排序', dataIndex: 'sort', key: 'sort', width: 80 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 100 },
  { title: '操作', key: 'action', width: 260, fixed: 'right' }
]

const dataSource = ref([
  {
    id: 1,
    title: '首页',
    icon: HomeOutlined,
    type: 2,
    path: '/dashboard',
    sort: 1,
    status: 1
  },
  {
    id: 2,
    title: '系统管理',
    icon: SettingOutlined,
    type: 1,
    path: '/system',
    sort: 2,
    status: 1,
    children: [
      {
        id: 21,
        title: '用户管理',
        icon: UserOutlined,
        type: 2,
        path: '/system/user',
        sort: 1,
        status: 1
      },
      {
        id: 22,
        title: '角色管理',
        icon: TeamOutlined,
        type: 2,
        path: '/system/role',
        sort: 2,
        status: 1
      },
      {
        id: 23,
        title: '菜单管理',
        icon: MenuOutlined,
        type: 2,
        path: '/system/menu',
        sort: 3,
        status: 1
      }
    ]
  }
])

const handleAdd = () => {
  message.info('新增菜单功能开发中...')
}

const handleEdit = (record) => {
  message.info(`编辑菜单：${record.title}`)
}

const handleAddChild = (record) => {
  message.info(`添加子菜单：${record.title}`)
}

const handleDelete = (record) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除菜单"${record.title}"吗？`,
    onOk: () => {
      message.success('删除成功')
    }
  })
}
</script>

<style lang="scss" scoped>
.menu-management {
  .table-actions {
    margin-bottom: 16px;
  }

  // 移动端适配
  @media screen and (max-width: 768px) {
    :deep(.ant-card-body) {
      padding: 12px;
    }

    .table-actions {
      margin-bottom: 12px;
    }

    // 表格样式优化
    :deep(.ant-table) {
      font-size: 12px;

      .ant-table-thead > tr > th {
        padding: 8px 4px;
        font-size: 12px;
      }

      .ant-table-tbody > tr > td {
        padding: 8px 4px;
        font-size: 12px;
      }

      .ant-btn-link {
        padding: 0 4px;
        font-size: 12px;
      }

      .ant-space {
        gap: 4px !important;
      }

      .ant-tag {
        font-size: 11px;
        padding: 0 4px;
      }
    }
  }
}
</style>
